<template>
  <!--<div class="option" @click="submited">-->
  <div class="option" @click="type === 'submited'?submited():unsubmited()">
    <span class="text" :class="{text_choosed: isChoosed}">
      {{content}}<template v-if="number>0" >({{number}})</template>
    </span>
    <div class="bottom" v-show="isChoosed"></div>
  </div>
</template>

<script>
export default {
  name: 'top_option',
  props: ['content', 'number', 'isChoosed', 'type', 'proves'],
  data () {
    return {
    }
  },
  methods: {
    unsubmited: function () {
      this.$parent.getUnsubmitedProves()
    },
    submited: function () {
      this.$parent.getSubmitedProves()
    }
  }
}
</script>

<style lang="scss" scoped>
  .option{
    width: px2rem(88);
    height: px2rem(44);
    text-align: center;
    /*border: px2rem(1) solid black;*/
    .text{
      height: px2rem(40);
      line-height: px2rem(40);
      font-size: $text-size-normal;
      color: $text-color;
    }
    .text_choosed{
      color: $ui-color-main-blue;
    }
    .bottom{
      width: px2rem(30);
      height: px2rem(4);
      border-radius: px2rem(2);
      margin: 0 auto;
      background: -webkit-linear-gradient(to right,#60C1F6,#A374E4); /* Safari 5.1 - 6.0 */
      background: -o-linear-gradient(to right,#60C1F6,#A374E4); /* Opera 11.1 - 12.0 */
      background: -moz-linear-gradient(to right,#60C1F6,#A374E4); /* Firefox 3.6 - 15 */
      background: linear-gradient(to right,#60C1F6,#A374E4); /* 标准的语法 */
    }
  }
</style>
